<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,maximum-scale=1.0" />
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/public.js" type="text/javascript" charset="utf-8"></script>
    <link type="text/css" rel="stylesheet" href="css/jedate.css">
    <script type="text/javascript" src="js/jedate.js"></script>
    <title>发票管理</title>
    <style type="text/css">
    	#jedate{
    		top: 1.165rem;
    	}
    </style>
</head>
<body>
	<div id="invoadm">
		<div class="admBar">
			<div class="barList">
				<span class="listBar order">全部订单</span>
				<ul class="listCon">
					<li class="on" data="1">全部订单</li>
					<li data="0">已支付</li>
				</ul>
			</div>
			<div class="barList">
				<span class="listBar">订单时间</span>
				<input type="text" class="jeinput" id="orderTime" placeholder="YYYY年MM月DD日">
			</div>
		</div>
		<div class="admCon">
			<div class="admList">
				<img class="check" onclick="check(this)" src="images/icon_choice_normal@2x.png" data="0"/>
				<img class="listImg" src="images/photofp1@2x.png"/>
				<div class="listContent">
					<span class="listName">炭烤薯条等3件商品</span>
					<span class="listPrice">￥<i class="peice">3000.00</i></span>
					<span class="listTime">2018-09-18 20:30</span>
				</div>
				<span class="state">已支付</span>
			</div>
			<div class="admList">
				<img class="check" onclick="check(this)" src="images/icon_choice_normal@2x.png" data="0"/>
				<img class="listImg" src="images/photofp1@2x.png"/>
				<div class="listContent">
					<span class="listName">炭烤薯条等3件商品</span>
					<span class="listPrice">￥<i class="peice">3000.00</i></span>
					<span class="listTime">2018-09-18 20:30</span>
				</div>
				<span class="state">已支付</span>
			</div>
		</div>
		<div class="invoNone">
			<img src="images/image_shuju@2x.png"/>
			<span>暂无数据</span>
		</div>
		<div class="admftr">
			<div class="checkAll">
				<img class="qx" src="images/icon_choice_normal@2x.png"/>
				<span>全选</span>
			</div>
			<div class="total">已选择<span class="num">0</span>笔账单</div>
			<div class="prices">
				<div class="priceTop">
					<span class="name">可开票金额</span>
					<span class="totalAmount">￥<i class="amount">0.00</i></span>
				</div>
				<div class="priceBtm">
					<span class="choice">已选金额￥<i class="price">0.00</i></span>
					<span class="owe">欠票金额￥<i class="price">0.00</i></span>
				</div>
			</div>
			<a class="startbtn" href="javascript:void(0);">立即开票</a>
		</div>
	</div>
	<div class="mask"></div>
	<input type="hidden" name="year" id="year" value="" />
	<input type="hidden" name="mouth" id="mouth" value="" />
	<input type="hidden" name="day" id="day" value="" />
<script type="text/javascript">
	jeDate("#orderTime",{
		isShow:true,
		theme:{ bgcolor:"#000000",color:"#ffffff", pnColor:"#9B9B9B"},
        format: "YYYY年MM月DD日",
        donefun: function(obj){
            //this    而this指向的都是当前实例
            console.log(obj.elem);     //得到当前输入框的ID
            console.log(obj.val);      //得到日期生成的值，如：2017-06-16
        
            //得到日期时间对象，range为false
            console.log(obj.date);    //这里是对象   
            $('#year').val(obj.date[0]['YYYY'])
            $('#mouth').val(obj.date[0]['MM'])
            $('#day').val(obj.date[0]['DD'])
            obj.date = {YYYY: 2017, MM: 08, DD: 18, hh: 10, mm: 25, ss: 10}
        	
        }
    });
    
    //判断里面有没有数据
	var invoList=$('.admCon').children().length
	if(invoList<=0){
		$('.admCon').hide()
		$('.invoNone').show()
	}
	
	//全选
    $(".checkAll").click(function(){
//        console.log(this);
        var check=$(this).find('.qx').attr('data')
        if(check==0){
        	$(this).find('.qx').attr('src','images/icon_choice_click@2x.png')
        	$(this).find('.qx').attr('data',1)
        	$('.check').attr('src','images/icon_choice_click@2x.png')
        	$('.check').attr('data',1)
        	$('.startbtn').addClass('OnBtn')
        }else{
        	$(this).find('.qx').attr('src','images/icon_choice_normal@2x.png')
        	$(this).find('.qx').attr('data',0)
        	$('.check').attr('src','images/icon_choice_normal@2x.png')
        	$('.check').attr('data',0)
        	$('.startbtn').removeClass('OnBtn')
        }
        allPrice();
        checkNum();
    });
    
    //单选
    function check(this5){
    	console.log(12)
        var check=$(this5).attr('data')
        if(check==0){
        	$(this5).attr('src','images/icon_choice_click@2x.png')
        	$(this5).attr('data',1)
        	$('.qx').attr('src','images/icon_choice_click@2x.png')
        	$('.qx').attr('data',1)
        	$('.startbtn').addClass('OnBtn')
        }else{
        	$(this5).attr('src','images/icon_choice_normal@2x.png')
        	$(this5).attr('data',0)
        	$('.qx').attr('src','images/icon_choice_normal@2x.png')
        	$('.qx').attr('data',0);
        	$('.startbtn').removeClass('OnBtn')
        }
      	allPrice();
      	checkNum();
    }
        //数量
    function checkNum(){
        var num=0;
        $(".check").each(function(){
            if($(this).attr("data") == 1){
//              var b=$($(this).parent().find('.count')).html();
                num+=Number(1);
            }
        });
        $(".total .num").html(num);
    }
    function allPrice(){
        var sum=0;
        $(".check").each(function(){
            if($(this).attr("data") == 1){
               var a=$($(this).parent().find('.price')).html();    //单类商品数量
               sum+=Number(a);
            }
        });
        $(".choice .price").html(sum);
        $("#totalAmount .price").html(sum);
    }
    
    //选择订单
    var show=false
    $('.listBar').on('click',function(){
    	if(show == false){
    		$('.listCon').animate({
				height:"2.453rem",
			},200).show();
			$(this).addClass('barOn')
			$('.mask').animate({
				height:"100%",
			},100).show()
			show=true
    	}else{
    		$(this).removeClass('barOn')
			$('.listCon').animate({
				height:"0",
			},200).hide()
			$('.mask').animate({
				height:"0",
			},100).hide()
			show=false
    	}
    	
		//点击遮罩层
		$('.mask ').on('click',function(){
			$('.order').find('.listBar').removeClass('barOn')
			$('.listCon').animate({
				height:"0",
			},200).hide()
			$('.mask').animate({
				height:"0",
			},100).hide()
		})
    })
    $('.listCon li').on('click',function(){
    	var index=$(this).html()
    	$(this).addClass('on').siblings().removeClass('on')
    	$('.order').html(index)
    })
</script>
</body>
</html>
